"use client"
import React from "react"
import { Database, Download, Edit, Plus, Search, Trash2, Upload } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import DataTable from "@/components/ui/data-table"
import { ColumnDef } from "@tanstack/react-table"
import { cn } from "@/lib/utils"

type DataSource = {
  id: number
  name: string
  type: string
  status: string
  lastUpdated: string
}

const columns: ColumnDef<DataSource>[] = [
  {
    accessorKey: "name",
    header: "名称"
  },
  {
    accessorKey: "type",
    header: "类型"
  },
  {
    accessorKey: "status",
    header: "状态",
    cell: ({ row }) => {
      const status = row.getValue<string>("status")

      return (
        <div>
          <span
            className={cn(
              "px-2 py-1 rounded-full text-xs",
              status === "已连接"
                ? "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300"
                : "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300"
            )}
          >
            {status}
          </span>
        </div>
      )
    }
  },
  {
    accessorKey: "lastUpdated",
    header: "最后更新"
  },
  {
    accessorKey: "actions",
    header: "操作",
    cell: () => {
      return (
        <div className="flex space-x-2">
          <Button variant="ghost" size="sm">
            <Edit className="h-4 w-4" />
          </Button>
          <Button variant="ghost" size="sm">
            <Download className="h-4 w-4" />
          </Button>
          <Button variant="ghost" size="sm">
            <Trash2 className="h-4 w-4" />
          </Button>
        </div>
      )
    }
  }
]

// 模拟数据源列表
const data: DataSource[] = [
  { id: 1, name: "用户行为日志", type: "数据库", status: "已连接", lastUpdated: "2023-06-15" },
  { id: 2, name: "产品销售数据", type: "CSV文件", status: "已连接", lastUpdated: "2023-06-14" },
  { id: 3, name: "客户反馈信息", type: "API", status: "连接失败", lastUpdated: "2023-06-10" },
  { id: 4, name: "系统监控日志", type: "数据库", status: "已连接", lastUpdated: "2023-06-12" }
]

/**
 * 数据管理页面
 */
const DataManagementPage = () => {
  return (
    <div>
      <div className="mb-8">
        <h2 className="text-2xl font-bold text-text-primary mb-2">数据管理</h2>
        <p className="text-text-secondary">管理您的数据源和数据集</p>
      </div>

      <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4 mb-6">
        <div className="relative w-full md:w-80">
          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
          <Input placeholder="搜索数据源..." className="pl-10 bg-white" />
        </div>
        <div className="flex space-x-2">
          <Button variant="outline">
            <Upload className="mr-2 h-4 w-4" />
            导入数据
          </Button>
          <Button>
            <Plus className="mr-2 h-4 w-4" />
            新建数据源
          </Button>
        </div>
      </div>

      <Card className="dark:bg-gray-800">
        <CardHeader>
          <CardTitle className="flex items-center">
            <Database className="mr-2 h-5 w-5" />
            数据源列表
          </CardTitle>
        </CardHeader>
        <CardContent>
          <DataTable data={data} columns={columns} />
        </CardContent>
      </Card>
    </div>
  )
}

export default DataManagementPage
